<template>
	<div class="common-layout">
	   <el-container>
	     <el-header><Header></Header></el-header>
	     <el-main>
			<div v-if="flag">
			 <h3>会员积分</h3>
			 <div class="fomeflex">
				<div>
					<el-form-item label="会员信息" label-width="80">
						<el-input
						clearable
						  style="width: 210px;"
						  v-model="info"
						  placeholder="请输入会员编号/昵称手机号"
						/>
					</el-form-item>
				</div>
				<div>
					<el-form-item label=" 会员标签" label-width="80">
						<el-select
						 style="width: 210px"
						  v-model="tagvalue"
						  clearable
						  placeholder="全部"
						>
						  <el-option
						    v-for="item in tags"
						    :key="item.userTagId"
						    :label="item.userTagName"
						    :value="item.userTagId"
						  />
						</el-select>
					</el-form-item>
				</div>
			 	<div class="block">
			 		<el-form-item label="创建时间" label-width="80">
					<el-date-picker
						style="width:120px"
						v-model="createTimeStart"
						type="date"
						placeholder="开始时间"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
					/>-
					<el-date-picker
						style="width:120px"
						v-model="createTimeEnd"
						type="date"
						placeholder="结束时间"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
					/>
			 		</el-form-item>
			 	  </div>
			 	<el-form-item label="注册来源" label-width="80">
			 		<el-select
			 			style="width: 210px"
			 		    v-model="sourcevalue"
			 		    clearable
			 		    placeholder="全部"
			 		>
			 		<el-option
						  v-for="item in source"
						  :key="item.orderSourceId"
						  :label="item.orderSourceName"
						  :value="item.orderSourceId"
			 		/>
			 		</el-select>
			 	</el-form-item>
			 	<el-button type="primary" @click="search" >搜索</el-button>
			 	<el-button plain @click="reset">重置</el-button>
			 </div>
			 <el-table :data="tableData" style="width: 100%" height="58vh">
			 	<el-table-column prop="userAccount" label="会员编号" width="80" />
			 	<el-table-column label="会员信息" width="110">
			 		<template #default="infor">
			 			<img src="../../public/头像.png" style="width:40px;height: 40px;object-fit: cover; ">
			 			<span>{{infor.row.userName}}</span>
			 		</template>
			 	</el-table-column>
			 	<el-table-column prop="userTel" label="手机号码" />
			 	<el-table-column prop="userScore" label="变动积分" />
			 	<el-table-column prop="userTotalScore" label="剩余积分" />
			 	<el-table-column prop="userTagId" label="标签" />
				<el-table-column prop="orderSourceId" label="来源/用途" />
			 	<el-table-column prop="createTime" label="创建时间" />
				<el-table-column label="操作" width="150">
					<template #default="opt">
						<span class="mya" @click="detail(opt.row)">详情</span>
						<span class="mya" @click="showTag(opt.row)">标签</span>
					</template>
				</el-table-column>
			 </el-table>
			
			 <!-- 点击标签显示框 -->
			 <el-dialog v-model="dialogFormVisible1" title="标签" width="500">
			     <el-form :model="formtwo">
			       <el-form-item label="会员标签" label-width="110">
			         <el-select style="width: 260px;" v-model="formtwo.userTagId" placeholder="请选择会员标签">
			          <el-option
			            v-for="item in tags"
			            :key="item.userTagId"
			            :label="item.userTagName"
			            :value="item.userTagId"
			          />
			         </el-select>
			       </el-form-item>
			     </el-form>
			     <template #footer>
			       <div class="dialog-footer">
			         <el-button @click="dialogFormVisible1 = false">取消</el-button>
			         <el-button type="primary" @click="sure">
			           确定
			         </el-button>
			       </div>
			     </template>
			   </el-dialog>
			 
			 
			<el-pagination
			 	layout="prev,pager,next"
			 	:page-count="total"
			 	:page-size="pageSize"
			 	v-model:current-page="pageIndex"	
			 	@current-change="changePage"
			 ></el-pagination>
			</div>
			<!-- 详情对话框 -->
			<el-dialog v-model="dialogFormVisible" title="积分变动详情" width="400">
				<el-form style="height: 400px;">
					<el-form-item>
						<ul>
							<li><span class="spanRight">会员头像</span><img src="../../public/头像.png" /></li>
							<li><span class="spanRight">会员编号</span><span>{{rowItem.userAccount}}</span></li>
							<li><span class="spanRight">会员昵称</span><span>{{rowItem.userName}}</span></li>
							<li><span class="spanRight">手机号码</span><span>{{rowItem.userTel}}</span></li>
							<li><span class="spanRight">变动积分</span><span>{{rowItem.userScore}}</span></li>
							<li><span class="spanRight">来源/途径</span><span>{{rowItem.orderSourceId}}</span></li>
							<li><span class="spanRight">发生时间</span><span>{{rowItem.createTime}}</span></li>
						</ul>
					</el-form-item>
				</el-form>
				<template #footer>
					<div class="dialog-footer">
						<el-button type="primary" @click="define">
							确定
						</el-button>
					</div>
				</template>
			</el-dialog>
			<!-- <VipDetails v-else @update-message="handleMessageUpdate"></VipDetails> -->
		 </el-main>
	   </el-container>
	 </div>
	
</template>

<script setup>
	import Header from '@/components/Header.vue'
	import { ref,reactive,onMounted} from 'vue'
	import {UpdateVipTags,VipScoreList,MembershipSource,MembershipTags} from "@/api"
	// import VipDetails from '@/components/VipDetails.vue';
	import { ElMessage } from 'element-plus'
	
	let pageIndex=ref(1);
	let pageSize=6;
	let total=ref(0)
	const tableData = ref([])
	const options = ref([])
	//获取会员积分模块会员列表
	const getScoreList = async ()=>{
		let res=await VipScoreList({
			pageIndex:pageIndex.value,
			pageSize:pageSize,
			siteId:Number(sessionStorage.getItem("siteId")),
		})
		// console.log("会员列表",res)
		tableData.value=res.userList
		for(var i=0;i<tableData.value.length;i++){
			if(tableData.value[i].userScore != null){
				tableData.value[i].userScore=Math.floor(tableData.value[i].userScore)
				tableData.value[i].userTotalScore=Math.floor(tableData.value[i].userTotalScore)
			}
		}
		total.value=res.pageCount
	}
	const tags = ref([])
	//获取会员标签下拉框
	const VipTaglist = async ()=>{
		let rop = await MembershipTags({
			siteId:Number(sessionStorage.getItem("siteId")),
		})
		// console.log("res",rop)
		tags.value = rop
	}
	//获取会员来源下拉框
	const source = ref([])
	const VipSourcelist = async ()=>{
		let rop = await MembershipSource()
		// console.log("res",rop)
		source.value = rop
	}
	//点击搜索
	const tagvalue=ref()
	const sourcevalue=ref()
	const info=ref()
	const value2=ref()
	let createTimeStart=ref()
	let createTimeEnd=ref()
	const search =async ()=>{
		let seachData=reactive({
			pageIndex:pageIndex.value,
			pageSize:pageSize,
			siteId:Number(sessionStorage.getItem("siteId")),
			orderSourceId: sourcevalue.value,
			userTagId: tagvalue.value,
			userAccount:info.value,
			createTimeStart:createTimeStart.value,
			createTimeEnd:createTimeEnd.value
		})
		let data={}
		for(var i in seachData){
			if(seachData[i]){
				data[i]=seachData[i]
			}
		}
		// console.log("data",data)
		let res=await VipScoreList(data)
		// console.log("搜索结果",res)
		tableData.value=res.userList
		for(var i=0;i<tableData.value.length;i++){
			if(tableData.value[i].userScore != null){
				tableData.value[i].userScore=Math.floor(tableData.value[i].userScore)
				tableData.value[i].userTotalScore=Math.floor(tableData.value[i].userTotalScore)
			}
		}
		total.value=res.pageCount
	}
	//重置
	const reset=()=>{
		getScoreList()
		tagvalue.value=""
		sourcevalue.value=""
		info.value=""
		createTimeStart.value="",
		createTimeEnd.value=""
	}
	
	// //点击详情
	let flag=ref(true)
	// function handleMessageUpdate (newflag) {
	// 	flag.value= newflag;
	// 	console.log(flag.value);
	// }
	// const detal = (r)=>{
	// 	flag.value=false
	// 	sessionStorage.setItem("userId",r.userId)
	// }
	
	//点击详情
	const dialogFormVisible = ref(false)
	let rowItem=reactive({});
	const detail = async (row) => {
		dialogFormVisible.value = true
		Object.assign(rowItem,row)
		// console.log(rowItem)
		// let res = await VipbalanceListdel({
		// 	"moenyId":row.moneyId
		// })
		// console.log("会员余额详情",res);
	}
	const define = async () => {
		dialogFormVisible.value = false
	}
	
	
	//点击标签修改标签
	let formtwo = reactive({
		userTagId:""
	})
	const dialogFormVisible1 = ref(false)
	const showTag = (row)=>{
		dialogFormVisible1.value=true;
		formtwo.userTagId=row.userTagId
		sessionStorage.setItem("userId",row.userId)
	}
	//点击会员积分标签中的确定修改会员标签
	const sure =async ()=>{
		let response = await UpdateVipTags({
			siteId:Number(sessionStorage.getItem("siteId")),
			userId:Number(sessionStorage.getItem("userId")),
			userTagId:formtwo.userTagId
		})
		dialogFormVisible1.value=false;
		// console.log(formtwo.userTagId)
		// console.log(response);
		ElMessage.success(response)
		getScoreList()
	}
	
	
	//分页
	const changePage=(page)=>{
		pageIndex.value=page;
		search()
	}
	
	const shortcuts = [
	  {
	    text: 'Last week',
	    value: () => {
	      const end = new Date()
	      const start = new Date()
	      start.setDate(start.getDate() - 7)
	      return [start, end]
	    },
	  },
	  {
	    text: 'Last month',
	    value: () => {
	      const end = new Date()
	      const start = new Date()
	      start.setMonth(start.getMonth() - 1)
	      return [start, end]
	    },
	  },
	  {
	    text: 'Last 3 months',
	    value: () => {
	      const end = new Date()
	      const start = new Date()
	      start.setMonth(start.getMonth() - 3)
	      return [start, end]
	    },
	  },
	]
	
	onMounted(()=>{
		getScoreList()
		VipTaglist()
		VipSourcelist()
	})
</script>

<style lang="less" scoped>
	.el-button{
		margin-left: 15px;
	}
	.el-input__wrapper{
		margin-right:15px;
	}
	h3{
		margin-bottom: 20px;
	}
	.el-table{
		width: 100vh;
		:deep(.cell){
			display: flex;
			align-items: center;
		}
	}
	.fomeflex{
		// margin-left: 50px;
		display: flex;
		flex-wrap: wrap;
	}
	.demonstration{
		margin-right: 12px;
	}
	.common-layout{
		background: #f2f3f5;
		.el-header{
			padding:0 !important;
			height: 10vh;
		}
		.el-main{
			height: 86vh;
			// padding:0;
			width: 98%;
			background: #fff;
			margin: 10px auto;
		}
	}
	.mya{
		display: inline-block;
		color: #4b5db9;
		width: 50px;
		text-align: center;
		cursor: pointer;
	}
	ul {
		// margin-top: 20px;
		margin-left: 30px;
		list-style: none;
	
		li {
			margin-top: 20px;
			display: flex;
			align-items: center;
		}
	}
	
	img {
		width: 25px;
	}
	
	.btns {
		width: 150px;
		float: right;
	}
	.mya{
		display: inline-block;
		color: #4b5db9;
		width: 50px;
		text-align: center;
		cursor: pointer;
	}
	.spanRight{
		margin-right: 20px;
	}
</style>